import logo from '@/assets/img/logo.png'
import style from './index.module.scss'
import { UserLoginFnc } from '@/api/login'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { saveToken } from '@/reduxToolkit/reducers/token'
import { Form, Input, Button, message } from 'antd'


const LoginPage = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const onFinish = async (info: {username: string, password: string}) => {
    const res = await UserLoginFnc({username: info.username, password: info.password})
    if(res.data.meta.status === 200) {
      message.success('登录成功', 1, () => {
        navigate('/users')
        dispatch(saveToken(res.data.data.token))
      })
    } else {
      message.error(res.data.meta.msg)
    }
  }

  return (
    <div className={style.loginBox}>
      <div className={style.container}>
        {/* logo区域 */}
        <div className={style.logo}><img src={logo} alt="" /></div> 

         {/* 表单区域 */}
        <div className={style.loginForm}>
          <Form onFinish={onFinish} labelCol={{ span: 4 }} style={{ maxWidth:400 }}>
            <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
            
            <Form.Item name="password" label="密码" rules={[{ required: true }]}>
              <Input.Password />
            </Form.Item>

            <Form.Item>
              <div className={style.btn}>
                <Button type="primary" htmlType="submit">登录</Button>
                <Button htmlType="button">重置</Button>
              </div>
            </Form.Item>
          </Form>
        </div> 
      </div>
    </div>
  )
}

export default LoginPage